<template>
  <div class="md-question-form">
    <a-form :model="formState" layout="vertical">
      <!-- 题目标题 -->
      <a-form-item label="题目标题" name="title" :rules="[{ required: true, message: '请输入题目标题' }]">
        <a-input v-model="formState.title" placeholder="请输入题目标题" />
      </a-form-item>

      <!-- Markdown 编辑器 -->
      <a-form-item label="题目内容" name="content" :rules="[{ required: true, message: '请输入题目内容' }]">
        <md-editor v-model="formState.content" height="400px" />
      </a-form-item>

     

    

      <!-- 按钮组 -->
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleSubmit">保 存</a-button>
          <a-button @click="handleReset">重 置</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

export default {
  name: 'MdQuestionForm',
  components: {
    MdEditor
  },
  data() {
    return {
      formState: {
        title: '',
        content: '',
        difficulty: 1,
        tags: []
      }
    }
  },
  methods: {
    handleSubmit() {
      // TODO: 实现表单提交逻辑
      console.log('表单数据：', this.formState)
    },
    handleReset() {
      this.formState.title = ''
      this.formState.content = ''
      this.formState.difficulty = 1
      this.formState.tags = []
    }
  }
}
</script>

<style scoped>
.md-question-form {
  padding: 20px;
}
</style>
